<template>
  <view class="conten">
    <top-tabbar tabTitle="体验课" v-if="fromPary.platform" :titleStatus="tabHeader" :class="tabHeader ? '' : 'tabHeaderBack'"  @click="backClick"></top-tabbar>
    <!-- 体验课与试听课 -->
    <view class="audition" :class="fromPary.platform? 'platformBackg': ''">
        <view class="experience">
           <view class="experImg" v-for="(item,index) in courseList" :key="index">
             <easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="item.imgUrl" loadingMode="spin-circle"></easy-loadimage>
           </view>
           <view style="height: 120rpx;"></view>
        </view>
       <view class="footer">
          <view class="btnget btn-zoom" @click="promptlyGet">立即领取</view>
        </view>
      <!-- 挽留弹窗 -->
      <detaim-loding ref="detaimPopup" @affirmClick="openOrder"></detaim-loding>
      <!-- 定位顶部添加老师的狗皮膏药 -->
      <view class="position-top">
         <view class="add-teacher" :class="topTeacherStatus ? 'teacher-animation' : 'begin-anima'">
            <view class="teacher-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/teacher.png"></image></view>
            <view class="text-conter">您还没有加专属辅导员哦，添加后可享受一对一专业辅导，学习效果加倍~</view>
            <view class="ben-add btn-zoom" @click="jumpApplet">
              <view class="go-addNmae">去添加</view>
              <view class="iconfont">&#xe6ab;</view>
              <launch-weapp v-if="$wechat.isWechat()" :wxPath="wxPath"></launch-weapp>
            </view>
          </view>
         <view class="animation-circle" v-if="topTeacherStatus" @click="clickBall ">
           <view class="img-box">
             <image style="border-radius: 50%;" mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/teacher.png"></image>
           </view>
         </view>
        </view>
    </view>
  </view>
</template>

<script>
  import { $POST, $GET, squeezePage, buyClass } from '@/utils/api.js' // 接口api
  import detaimLoding from '@/components/loding/detaimLoding.vue' // 挽留弹窗
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue' // 图片懒加载
  import launchWeapp from '@/components/subscribe/launchWeapp.vue' // 跳小程序组件
  import topTabbar from '@/components/topTabbar/index.vue'
  export default {
    components: { 
      detaimLoding, 
      easyLoadimage,
      launchWeapp,
      topTabbar
    },
  	data() {
  		return {
        tabHeader: true, // 顶部标题状态
        wechatState: false, // 是否安装微信
        pathUrl: '', // 地址参数
        wxPath: 'pages/add_account/system', // 跳小程序地址---默认是什么都没买的地址
        topTeacherStatus: false, // 顶部添加老师的横幅显示与隐藏
        scrollTop:0, // 懒加载需要的高度
        courseId:'a368d592-3f65-b9af-04ac-3a00150f4e72', // 体验课id：a368d592-3f65-b9af-04ac-3a00150f4e72，// 系统课id:444e80df-20f1-17d2-7d5a-3a0016483644
        fromPary: { // 回显的参数
          phone:'', // 手机号码
          goodsId: '', // id
          skuId: '', // skuiD
          radid: '' , // 需要传给支付渠道id
          rsid: '', // 子渠道id
          platform: '' ,// 客户端app所属平台
        },
        phoneNum: '', // 绑定的手机号码
        courseList: [// 课程数据
          { id: 1, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/trial_class/trial_class1_v3.jpg'},
          { id: 2, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/trial_class/trial_class2_v3.jpg'},
          { id: 3, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/trial_class/trial_class3_v3.jpg'},
          { id: 4, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/trial_class/trial_class4_v3.jpg'},
          { id: 5, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/trial_class/trial_class5_v3.jpg'},
          { id: 6, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/trial_class/trial_class6_v3.jpg'}
        ], 
      }
    },
    onPageScroll({scrollTop}) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
      this.scrollTop = scrollTop
      if(scrollTop < 50) {
         this.tabHeader = true
      }
      if(scrollTop> 50){
        this.tabHeader = false
      }
      // 大于100添加老师文案滑出
      if (scrollTop > 100) {
        this.topTeacherStatus = true
      }
    },
    onLoad(params) {
      const vm = this
      vm.pathUrl = window.location.href.split('?')[1]
      if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
      }
      if(vm.$auth.getUrlPrams("wechat")){
         let wechatState = vm.$auth.getUrlPrams("wechat").toLowerCase() // 转小写
        if(wechatState == 'true'){
          vm.wechatState = true
        }
      }
      if(vm.$auth.getUrlPrams("platform")) {
        vm.fromPary.platform = vm.$auth.getUrlPrams("platform").toLowerCase() // 转小写
      }
       vm.$wechat.unseBehavior()
      // 微信环境下获取openid与分享配置
      if(vm.$wechat.isWechat()){
        if(vm.$auth.getUrlPrams("code")){
          vm.$auth.init()
          setTimeout(() => {
            vm.junmPay(vm.fromPary.phone)
          },1000)
        }
        // 权限注入与分享
        this.$wechat.share({
          title: '从组装中国空间站开始学习思维建模',
          desc: '编程是载体，思维建模更重要！',
          link: window.location.href,
          imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/app_log.png'
        })
      }
      // 支付失败打开挽留弹窗
      if(params.pageNum) {
        setTimeout(()=>{
          vm.$refs.detaimPopup.getPopupOpen() 
        },100)
      }
    },
    methods:{
      /* 立即领取+跳支付+打开绑定弹窗
       如果是微信环境，判断有没有openId,没有就要授权获取
        如果知道电话号码，说明绑定过，直接跳支付
      */
      promptlyGet() {
        const vm = this
        if(vm.$wechat.isEnterprise()){
          vm.junmPay(vm.fromPary.phone)
          return;
        }
        if(vm.$wechat.isWechat()){
          const openId = uni.getStorageSync('openId')
          if(!openId){
            vm.$auth.init()
          }else{
            vm.junmPay(vm.fromPary.phone)
          }
        }
        else{
          vm.junmPay(vm.fromPary.phone) 
        }
      },
      // 跳支付页
      junmPay(phone) {
        const vm = this
        uni.navigateTo({
          url: '/pages/my/order/payment?phone='+phone+'&skuid='+vm.courseId+'&'+vm.pathUrl,
            success:(res)=>{
              if(res.errMsg == 'navigateTo:ok'){
                if(vm.$wechat.isWechat()){
                  window.location.reload ( true ) 
                }
              }
            }
        }) 
      },
      // 获取详情
      async getDetail() {
        const vm = this
        const detailRes = await squeezePage(vm.courseId)
        vm.$nextTick(function(){
          vm.fromPary.goodsId = detailRes.id
        })
      },
      // 点击老师图片滑出按钮与文案
      clickBall() {
        this.topTeacherStatus = false
      },
      // 跳小程序
      jumpApplet() {
        const vm = this
        if(vm.wechatState) {
          window.location.href = 'weixin://dl/business/?t=Klejr1pGAsj'
        }else{
          window.location.href = 'weixin://dl/business/?t=Klejr1pGAsj'
        }
      },
      // 挽留弹窗
      openOrder() {
        const vm = this
        vm.$refs.detaimPopup.getPopupConcal()
        vm.junmPay(vm.fromPary.phone)
      },
      // 返回上一页
      backClick() {
        uni.navigateBack({})
      }
    }
  }
</script>

<style lang="scss" scoped>
  image{
    width: 100%;
    height: 100%;
    vertical-align:bottom;
  }
  /deep/ .top-tabbar-wrap{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #FFFFFF;
  }
  .tabHeaderBack{
    background: rgba(0,0,0,0.3);
  }
  .platformBackg{
     margin-top: 176rpx;
  }
  .audition{
    .experience{
      .experImg{
        width: 100%;
        height: 1409rpx;
        display: flex;
        flex-direction: column;
      }
      /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
      /deep/ .loading-img{
        height: 500rpx;
      }
    }
  }
  .footer{
    width: 750rpx;
    height: 120rpx;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
    -moz-backdrop-filter: blur(20rpx);
    -ms-backdrop-filter: blur(20rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: env(safe-area-inset-bottom);
    .btnget:active{
      background: rgba(#FF800C,0.7);
    } 
    .btnget{
       width: 680rpx;
       padding: 6rpx 0;
       border-radius: 44rpx;
       font-weight: bold;
       background: #FF800C;
       font-weight: bold;
       font-size: 48rpx;
       text-align: center;
       color: #FFFFFF;
       letter-spacing: 0.2em;
       animation-fill-mode: both;
       animation: btnget 1s infinite 1s;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.97,0.97);}        
        100% { transform: scale(1,1);}
      }
  }
  // 定位顶部老师的狗皮膏药
  .position-top{
     position: fixed;
     left: 0;
     right: 0;
     top: 260rpx;
     // margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
    .teacher-animation{
      animation-fill-mode: both;
      animation: teacher-animation 2s forwards 0.1s;
    }
    .begin-anima{
      animation-name: begin-anima;
      -webkit-animation-name: begin-anima;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      animation-timing-function: ease-in-out;
      -webkit-animation-timing-function: ease-in-out;
      visibility: visible !important;
      animation-fill-mode: forwards;
    }
    @keyframes teacher-animation {
       0% { 
         -webkit-transform: translate(0);
         -moz-transform: translate(0);
         -ms-transform: translate(0);
         transform: translate(0);
         opacity: 1;
         }
       100% { 
         -webkit-transform: translate(120%);
         -moz-transform: translate(120%);
         -ms-transform: translate(120%);
         transform: translate(120%);
         opacity: 0;
       }
     }
     @keyframes begin-anima {
        0% { 
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -ms-transform: translateX(100%);
          transform: translateX(100%);
          opacity: 0;
          }
        100% { 
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
          opacity: 1;
          }
      }
    .add-teacher{
      width: 670rpx;
      height: 72rpx;
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(12rpx);
      border-radius: 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .teacher-img{
        width: 72rpx;
        height: 72rpx;
        position: absolute;
        top: 0rpx;
        left: 0rpx;
      }
      .text-conter{
        font-size: 20rpx;
        margin-left: 94rpx;
        width: 58%;
        color:#FFFFFF;
      }
      .ben-add{
        width: 158rpx;
        height: 72rpx;
        background: #FF800C;
        color: #FFFFFF;
        border-radius: 0px 36rpx 36rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .go-addNmae{
          font-weight: 500;
          font-size: 28rpx;
          margin-bottom: 5rpx;
        }
      }
    }
    .animation-circle{
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 38rpx 0px 0px 38rpx;
      z-index: 99;
      display: flex;
      align-items: center;
      .img-box{
        width: 72rpx;
        height: 72rpx;
        margin-left: 5rpx;
      }
    }
  }
</style>
